<template>
  <div class="marketing">
    <!-- <Left-menus active="3"></Left-menus>
    <div class="marketing-main">
      <h1>商品管理</h1>
      <div class="list">
        <div class="head my-btn">
          <el-button @click="addDet('-1')">添加商品</el-button>
          <el-input placeholder="输入商品名称搜索" v-model="shopName">
            <i slot="prefix" class="el-input__icon el-icon-search search"></i>
          </el-input>
        </div>
        <div class="content">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="商品名称"></el-table-column>
            <el-table-column prop="name" label="品牌商"></el-table-column>
            <el-table-column label="溯源环节">
              <el-button type="text" style="color:#76d4ce;" @click="dialogVisible = true">配置</el-button>
            </el-table-column>
            <el-table-column label="小程序模版">
              <template slot-scope="scope">
                <div class="my-btn">
                  <span>默认</span>
                  <el-button
                    type="text"
                    style="width:auto;padding:5px 10px;marginLeft:10px"
                    @click="dialogVisible2 = true"
                  >更换{{scope.row.id}}</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div class="operat">
                  <el-button type="text" style="color:#76d4ce;">上链</el-button>
                  <el-button type="text" style="color:#76d4ce;" @click="addDet(scope.row)">编辑</el-button>
                  <el-popconfirm
                    confirmButtonText="删除"
                    cancelButtonText="取消"
                    title="确认删除吗？"
                    hideIcon
                    cancelButtonType="default"
                    @onConfirm="deletion"
                  >
                    <el-button type="text" style="color:#76d4ce;marginLeft:10px" slot="reference">删除</el-button>
                  </el-popconfirm>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="paging"
            align="right"
            @current-change="handleCurrentChange"
            :current-page.sync="curPage"
            hide-on-single-page
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="count"
          ></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="溯源环节配置" :visible.sync="dialogVisible" width="800px" class="company">
      <div class="configu">
        <div class="enterprise title">
          <p>模版名称：</p>
          <el-input v-model="companyForm.name" placeholder="请输入模版名称"></el-input>
        </div>
        <div>
          <p>环节名称：商品介绍</p>
          <div class="configu-main">
            <div class="enterprise">
              <p>小程序展示：</p>
              <el-radio v-model="radio" label="1">是</el-radio>
              <el-radio v-model="radio" label="2">否</el-radio>
            </div>
          </div>
          <p>环节名称：产地介绍</p>
          <div class="configu-main">
            <editor-bar v-model="weLanguageForm[0].editorText" :isClear="isClear" @change="change"></editor-bar>
            <div class="enterprise">
              <p>小程序展示：</p>
              <el-radio v-model="radio" label="1">是</el-radio>
              <el-radio v-model="radio" label="2">否</el-radio>
            </div>
            <span class="configu-delete">删除</span>
          </div>
          <p>环节名称：商品介绍</p>
          <div class="configu-main">
            <span class="configu-delete">删除</span>
          </div>
          <p>环节名称：商品介绍</p>
          <div class="configu-main">
            <span class="configu-delete">删除</span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="添加商品" :visible.sync="dialogVisible1" width="400px" class="company">
      <span>
        <div class="enterprise">
          <p>
            <span>*</span>商品品牌：
          </p>
          <el-select v-model="shopForm.name" placeholder="请选择商品品牌">
            <el-option label="item.label" value="item.value"></el-option>
            <el-option label="item.label" value="item.value"></el-option>
          </el-select>
        </div>
        <div class="enterprise">
          <p>
            <span>*</span>商品名称：
          </p>
          <el-input v-model="shopForm.code" placeholder="请输入商品名称"></el-input>
        </div>
        <div class="enterprise">
          <p>
            <span>*</span>商品种类：
          </p>
          <el-select v-model="shopForm.name" placeholder="请选择商品种类">
            <el-option label="item.label" value="item.value"></el-option>
            <el-option label="item.label" value="item.value"></el-option>
          </el-select>
        </div>
        <div class="enterprise">
          <p>商品规格：</p>
          <el-input v-model="shopForm.number" placeholder="请输入商品规格"></el-input>
        </div>
        <div class="enterprise">
          <p>适用人群：</p>
          <el-input v-model="shopForm.number" placeholder="请输入适用人群"></el-input>
        </div>
        <div class="enterprise">
          <p>保质期：</p>
          <el-input v-model="shopForm.number" placeholder="请输入保质期"></el-input>
        </div>
        <div class="enterprise">
          <p>贮存方法：</p>
          <el-input v-model="shopForm.number" placeholder="请输入贮存方法"></el-input>
        </div>
        <div class="enterprise">
          <p>溯源模版：</p>
          <el-select v-model="shopForm.name" placeholder="请选择溯源模版">
            <el-option label="item.label" value="item.value"></el-option>
            <el-option label="item.label" value="item.value"></el-option>
          </el-select>
        </div>
        <div class="enterprise enterpriseAdd">
          <i class="el-icon-plus">添加更多信息</i>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="小程序配置" :visible.sync="dialogVisible2" width="375px" class="company">
      <span class="applet">
        <el-select v-model="applet" placeholder="请选择">
          <el-option label="item.label" value="item.value"></el-option>
          <el-option label="item.label" value="item.value"></el-option>
        </el-select>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
// import LeftMenus from "@/views/components/TraceaLeftmenus";
// import { BASE_URL } from "@/utils/service.js";
// import EditorBar from "@/views/components/EditorBar";
// export default {
//   data() {
//     return {
//       shopName: "",
//       curPage: 1,
//       BASE_URL,
//       pageSize: 10,
//       count: null,
//       dialogVisible: true,
//       dialogVisible1: false,
//       dialogVisible2: false,
//       applet: "",
//       addDetState: null,
//       shopForm: {},
//       companyForm: {},
//       radio: "1",
//       weLanguageForm: [
//         {
//           weLanguageValue: "",
//           editorText: ""
//         }
//       ],
//       isClear: false,
//       tableData: [
//         {
//           id: 0,
//           date: "阿里巴巴",
//           name: "213543645756",
//           address: "上海市普陀区金沙江路 1518 弄",
//           qiye: "梅克尔树",
//           number: "1111",
//           code: "2222"
//         },
//         {
//           id: 1,
//           date: "亚马逊",
//           name: "2343台534542342341",
//           address: "辛苦了这绝对是大会看见爱上带回家",
//           qiye: "",
//           number: "1111",
//           code: "2222"
//         },
//         {
//           id: 2,
//           date: "快猫",
//           name: "ju67567567856756",
//           address: "发过火凤凰的东莞市",
//           qiye: "聂军",
//           number: "1111",
//           code: "2222"
//         }
//       ]
//     };
//   },
//   methods: {
//     handleCurrentChange() {},
//     deletion() {},
//     handleAvatarSuccess(res, file) {
//       this.companyForm.imgurl = res.data.url;
//     },
//     beforeAvatarUpload(file) {
//       // 上传图片
//       const typeArr = ["image/jpeg", "image/png", "image/gif"];
//       const isLt2M = file.size / 1024 / 1024 < 1;
//       const typeType = typeArr.indexOf(file.type);
//       if (typeType < 0) {
//         this.$message.error("请选择JPG/PNG/GIF格式的图片!");
//       }
//       if (!isLt2M) {
//         this.$message.error("请选择不超过1MB的图片!");
//       }
//       return typeType >= 0 && isLt2M;
//     },
//     addDet(row) {
//       this.shopForm = {};
//       this.dialogVisible1 = true;
//       this.addDetState = row.id;
//       if (row != "-1") {
//         this.shopForm = row;
//       }
//     },
//     change(val) {
//       console.log(val);
//     }
//   },
//   components: {
//     LeftMenus,
//     EditorBar
//   }
// };
</script>

<style lang="scss" scoped>
// .marketing {
//   display: flex;
//   justify-content: center;
//   .marketing-main {
//     width: 960px;
//     padding: 20px;
//     background-color: rgba(248, 255, 255, 1);
//     .list {
//       margin-top: 35px;
//       background-color: #fff;
//       padding: 10px 15px;
//       .head {
//         display: flex;
//         justify-content: space-between;
//         .search {
//           cursor: pointer;
//         }
//         /deep/ .el-input {
//           width: 300px;
//         }
//         /deep/ .el-input__inner {
//           box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
//           border: 1px solid rgba(255, 0, 0, 0);
//           border-radius: 0;
//         }
//         /deep/ .el-input__inner:focus {
//           border-color: #ddd;
//         }
//       }
//       .content {
//         margin-top: 25px;
//         .paging {
//           margin-top: 50px;
//         }
//       }
//     }
//   }
//   .configu {
//     padding: 0 50px;
//     .configu-main {
//       padding: 15px;
//       width: 97%;
//       height: 350px;
//       border: 1px dotted #bbb;
//       margin: 15px 0 35px;
//       position: relative;
//       .configu-delete {
//         position: absolute;
//         top: 50%;
//         right: -40px;
//         cursor: pointer;
//         color: #00baad;
//       }
//     }
//   }
//   .enterprise {
//     margin-bottom: 10px;
//     span {
//       color: red;
//     }
//     p {
//       min-width: 80px;
//       line-height: 30px;
//       text-align: right;
//     }
//     width: 100%;
//     display: flex;
//     /deep/ .el-input__inner {
//       line-height: 30px;
//       height: 30px;
//     }
//     /deep/ .el-select {
//       width: 100%;
//     }
//     /deep/ .el-radio {
//       line-height: 30px;
//     }
//   }
//   .enterpriseAdd {
//     margin: 15px 0 0 0;
//     border: 1px dotted #bbb;
//     padding: 8px 0;
//     i {
//       display: block;
//       width: 100%;
//       text-align: center;
//       font-weight: bold;
//       cursor: pointer;
//     }
//   }
//   .title {
//     justify-content: center;
//     /deep/ .el-input {
//       width: 200px;
//     }
//   }
//   .company {
//     /deep/ .el-dialog__footer {
//       text-align: center;
//       .el-button--primary {
//         background-color: #76d4ce;
//         border-color: #76d4ce;
//         color: #fff;
//       }
//       .el-button {
//         padding: 10px 30px;
//         width: 150px;
//       }
//       .el-button--default:focus,
//       .el-button--default:hover {
//         color: #76d4ce;
//         border-color: #76d4ce;
//         background-color: #ecf5ff;
//       }
//     }
//     .applet {
//       display: flex;
//       align-items: center;
//       justify-content: center;
//     }
//   }
// }
</style>